<template>
  <div>
    <p>1. 表单输入绑定</p>
    <p><input type="text" v-model="msg"></p>
    <p><textarea cols="30" rows="10" v-model="msg"></textarea></p>
    <p>{{msg}}</p>
    <p>====================================</p>

    <input type="checkbox" v-model="checkBoxVal">
    <p>{{checkBoxVal}}</p>
    <p>====================================</p>

    <p>多个复选框，绑定到同一个数组：</p>
    <input type="checkbox" id="jack_id" value="Jack" v-model="checkedNames">
    <label for="jack_id">Jack</label>
    <input type="checkbox" id="john_id" value="John" v-model="checkedNames">
    <label for="john_id">John</label>
    <input type="checkbox" id="mike_id" value="Mike" v-model="checkedNames">
    <label for="mike_id">Mike</label>
    <br>
    <p>Checked names: {{ checkedNames }}</p>
    <ul>
      <li v-for="(item, index) in checkedNames" :key="index">{{item}}</li>
    </ul>






  </div>
</template>

<script>
    export default {
        name: "ApiDemo02",
      data() {
          return {
            msg: "input文本",
            checkBoxVal: false,
            checkedNames: []
          };
      }
    }
</script>

